<!--年度周期性培训情况-->
<script setup lang="ts">

import IndexSmallTitle from "./common/IndexSmallTitle.vue";
import GroupButtons from "./common/GroupButtons.vue";
import YearTrainDataItem from "./YearTrainDataItem.vue";
import {useRoute,useRouter} from "vue-router";
import {onMounted, ref} from "vue";

const route = useRoute();
const router = useRouter();

const buttons = ref([
  {label: '劳动安全', selected: true},
  {label: '应急处置', selected: false},
  {label: '作业标准', selected: false},
  {label: '防洪', selected: false},
  {label: '除雪打冰', selected: false},
  {label: '消防', selected: false},
  {label: '特殊连锁设备', selected: false},
  {label: '暑期劳动安全', selected: false},
]);

function clickIndex(index:number,upRout:boolean){
  buttons.value.forEach((e, i) => {
    e.selected = i === index;
  });

  if(upRout){
    updateRoute(index)
  }
}

onMounted(()=>{
  const yearCycleIndex = Array.isArray(route.query.yearCycleIndex)
      ? route.query.yearCycleIndex[0]
      : route.query.yearCycleIndex;
  console.log(yearCycleIndex, 'leftMenuIndex');
  // 解析为整数
  const index = parseInt(yearCycleIndex, 0);
  // 检查是否为有效数字
  if (!isNaN(index)) {
    clickIndex(index,false);
  } else {
    console.error('Invalid leftMenuIndex:', yearCycleIndex);
  }
});
const updateRoute = (index:number) => {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      yearCycleIndex: index,
    },
  });
};

function getWidth(){
  return window.innerWidth-550;
}

</script>

<template>
  <div class="mainStyle1">
    <IndexSmallTitle title="年度周期性培训情况"></IndexSmallTitle>
    <GroupButtons style="margin-top: 20px" @ccc="clickIndex" :buttons="buttons" :width="getWidth()"></GroupButtons>
    <YearTrainDataItem></YearTrainDataItem>
  </div>

</template>

<style scoped>
.mainStyle1{
  margin-top: 20px;
  background-color: #FFFFFF;
  padding: 10px 15px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(4,42,94,0.1);
}
</style>